body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: url(https://img.js.design/assets/img/66b4879b0cc5e54365881f8d.jpg);
    background-size: cover;
}

.svg-image {
    position: fixed;
    top: 20px; /* 距离顶部的距离，可按需调整 */
    right: 200px; /* 距离右侧的距离，可按需调整 */
    width: 80px; /* 设置宽度 */
    height: auto; /* 保持宽高比 */
    z-index: 100; /* 确保图标显示在其他元素之上 */
}

.mainsvg1 {
    display: flex;
    position: fixed;
    top: 300px; /* 向下移动 20px */
    left: 320px; /* 向右移动 20px */
    width: 70px; /* 设置宽度 */
    z-index: 100; /* 确保图标显示在其他元素之上 */
}

.mainsvg2 {
    display: flex;
    position: fixed;
    top: 400px; /* 向下移动 20px */
    left: 320px;
    width: 70px; /* 向右移动 20px */
    z-index: 100; /* 确保图标显示在其他元素之上 */
}

.mainsvg3 {
    display: flex;
    position: fixed;
    top: 555px; /* 向下移动 20px */
    left: 515px;
    width: 70px; /* 向右移动 20px */ 
    z-index: 100; /* 确保图标显示在其他元素之上 */
}

.rounded-rectangle1{
    position: fixed;
    left: 105px;
    top: 50px;
    width: 180px; /* 矩形宽度 */
    height: 63px; /* 矩形高度 */
    border-radius: 45px; /* 圆角 */
    background: rgba(241, 162, 86, 1);
    opacity: 1;
}

.rounded-rectangle2{
    position: fixed;
    left: 105px;
    top: 150px;
    width: 180px; /* 矩形宽度 */
    height: 120px; /* 矩形高度 */
    border-radius: 45px; /* 圆角 */
    background: rgba(241, 162, 86, 1);
    opacity: 1;
}

.rounded-rectangle3{
    position: fixed;
    left: 20px;
    top: 300px; 
    width: 180px; /* 矩形宽度 */
    height: 63px; /* 矩形高度 */
    border-radius: 45px; /* 圆角 */
    background: rgba(241, 162, 86, 1);
}

.mainsvg4{
    display: flex;
    position: fixed;
    right: 200px;
    top: 220px; 
    width: 300px;
    height: auto;
    z-index: 3;
}
.mainsvg5 {
    display: flex;
    position: fixed;
    right: 304px;
    top: 350px; 
    width: 300px;
    height: auto;
    z-index: 2;
}
.personal-center {
    position: fixed;
    top: 30px; /* 距离顶部的距离，可根据需要调整 */
    right: 20px; /* 距离右侧的距离，可根据需要调整 */
    color: #333; /* 文字颜色，可根据需要调整 */
    text-decoration: none; /* 去除下划线 */
    font-size: 40px; /* 文字大小，可根据需要调整 */
    z-index: 100; /* 确保显示在其他元素之上 */
}

.personal-center:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}


.logo-text {
    position: fixed;
    left: 23px;
    bottom: calc(100% - 35px - 51px);
    width: 332px;
    height: 51px;
    opacity: 1;
    /** 文本1 */
    font-size: 45px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 50.94px;
    color: rgba(255, 141, 26, 1);
    text-align: left;
    vertical-align: top;
    white-space: nowrap; /* 防止文字换行 */
}

.card-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 200px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #333;
    text-decoration: none;
    background: rgba(248, 198, 130, 1);

    opacity: 1;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 66px; /* 合并后使用第二个选择器的高度 */
    width: 120px; /* 合并后使用第二个选择器的宽度 */
    font-size: 60px; /* 修改这里的字体大小来测试 */
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 65.39px;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    left: 679px;
    top: 688px;
    opacity: 1;
    /** 文本1 */
    text-align: left;
    vertical-align: top;
}


.card h2 {
    margin: 0;
    font-size: 18px;
}

/* 单独定位每个卡片 */
#card1 {
    position: fixed;
    left: 50px;
    width: 310px;
    height: 500px;
    transform: translateY(40px); /* 整体下移 20px，可按需调整 */
}

#card2 {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 40px);
    width: 310px;
    height: 500px;
    background: url("https://img.js.design/assets/img/676ae6aab269b2492dbe7b6b.jpg#85ce5519c38625a4768dce0a5da66285") no-repeat center center;
    background-size: cover; /* 或者使用 contain */
}

#card3 {
    position: fixed;
    right: 50px;
    width: 310px;
    height: 500px;
    transform: translateY(40px);
}

.bottom-card {
    width: 250px; 
    height: 100px; /* 小卡片高度 */
    background-color:rgba(251, 132, 49, 1); /* 半透明背景 */
    border-radius: 30px; /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    position: fixed; /* 绝对定位 */
    bottom: 30px; /* 距离底部 20px */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* 确保覆盖在大卡片之上 */
}

